<template>
  <div>
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable">货品编号</div>
          <el-input v-model="input1" placeholder="请输入"></el-input>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable">货品名称</div>
          <el-input v-model="input2" placeholder="请输入"></el-input>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable">货主名称</div>
             <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
             </el-select>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="lable"></div>
          <div class="button">
             <el-button type="warning" round>搜索</el-button>
             <el-button round>重置  </el-button>
          </div>
          </div></el-col>
      </el-row>
    </div>
    <div class="content">
      <el-button type="success" round>新增仓库</el-button>
      <div style=" width: 1227.6px;">
        <el-table
          :data="tableData"
          stripe
          border
          :header-cell-style="{background: '#f9f6ee'}"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="序号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="code"
            label="仓库编码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="仓库名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="type"
            label="仓库类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="省/市/区"
            width="300">
          </el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            width="120">
          </el-table-column>
          <el-table-column
            prop="state"
            label="仓库状态"
            width="120">
          </el-table-column>
          <el-table-column
            prop="extent"
            label="仓库面积m²"
            width="120">
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="库区数量"
            width="120">
          </el-table-column>
          <el-table-column
            prop="person"
            label="负责人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="telephone"
            label="联系电话"
            width="120">
          </el-table-column>
          <el-table-column
            prop="time"
            label="更新时间"
            width="120">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button class="fontOperateButton" @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button class="fontOperateButton" @click="enableClick(scope.row)" type="text" size="small">启用</el-button>
              <el-button class="fontOperateButton" @click="delClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="BasePagination">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { color } from 'echarts';
export default {
  data(){
    return{
        // 输入框
        input1: '',
        input2: '',
        // 多选框
         options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '停用'
        }, {
          value: '选项3',
          label: '启用'
        }],
        // 多选框的值
        value: '',
        // 表格
        tableData: [{
          number: '2016-05-02',
          code: '王小虎',
          name: '上海',
          type: '普陀区',
          city: '上海市普陀区金沙江路 1518 弄',
          address: 200333,
          state:'6',
          extent:'66',
          quantity:'45',
          person:'卢本伟',
          telephone:1354354,
          time:'2022-12-01'

        }],
        // 分页
        currentPage4: 4
    }
  },
    methods: {
      editClick(row) {
        console.log(row);
      },
      enableClick(row) {
        console.log(row);
      },
      delClick(row){
        console.log(row);
      },
      // 分页的
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
}
</script>

<style lang="less" scoped>
.head{
    width: 1230px;
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgba(144,142,142,.17);
    padding: 30px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .lable{
      margin-bottom: 10px;
      height: 18px;
      font-size: 12px;
      color: #887e7e;
      font-weight: 500;
    }
    /deep/ .el-input__inner{
      width: 277.5px;
      background: #f8f5f5;
      border-radius: 6px;
      border: 1px solid transparent;
      &:hover {
        border: 1px solid #ffb200;
      }
    }
    .lable{
      width: 269.4px;
      height: 18px;
      margin-bottom: 10px;
      height: 18px;
    }
    .button{
      width: 180px;
      height: 40px;
      float: right;
      /deep/ .el-button--warning{
        margin-right: 20px;
        background: #ffb200;
        color: #332929;
        width: 80px;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        padding: 1px 6px;
        box-sizing: border-box;
    }
      /deep/ .el-button--default{
        background: #f8f5f5;
        width: 80px;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        margin-left: 0;
        padding: 1px 6px;
        &:hover{
          background: #ffb200;
        }
    }
    }

}
.content{
  width: 1227.6px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgba(144,142,142,.17);
  /deep/ .el-button--success{
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #00be76;
    color: #fff;
    width: 108px;
    height: 40px;
    border-radius: 20px;
    border: 0;
    font-size: 14px;
    padding: 1px 6px;
    box-sizing: border-box;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    padding-left: 26px;
    padding-right: 26px;
  }
  /deep/ .el-table__row.hover-row{
      td {
        background: #fff6e2 !important;
      }
  }
  /deep/ .el-table__row--striped {
      td{
        background-color: #fdfcf9;
      }
  }
  /deep/ .el-table__header-wrapper{
    tr{
      background-color: #f9f6ee;
    }
  }
  .BasePagination{
    width: 1227.6px;
    height: 84px;
    margin: 0 auto;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 34px;
    box-sizing: border-box;
    /deep/ .el-input__inner{
      background-color: #f8f5f5;
    }
    /deep/ .number{
      background-color: #fff;
    }
    /deep/ .active{
      color:#ffb200
    }
  }
  .fontOperateButton{
      color:#ffb200
  }
  /deep/ .cell{
    font-weight: normal;
  }
}
</style>
